<template>
  <view>
    <l-echart ref="chartRef" @finished="init"></l-echart>
  </view>
</template>

<script setup>
import { ref, defineProps, watch, nextTick } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);
// 定义接收的属性
const props = defineProps({
  option: {
    type: Object,
    default: () => ({}),
  },
  height: {
    type: Number,
    default: () => 300,
  },
});
const chartHeight = ref(props.height);

const init = () => {
  // console.log("aaaa");
  // 默认获取容器尺寸
  chartRef.value.resize({ width: "100%", height: chartHeight.value });
};

const chartOption = ref(props.option);
// 当传入的 option 变化时更新图表选项
watch(
  () => props.option,
  (newOption) => {
    chartOption.value = newOption;
    initEcharts();
  },
  { deep: true }
);
const initEcharts = async () => {
  if (!chartRef.value) return;
  const myChart = await chartRef.value.init(echarts);
  myChart.setOption(props.option);
};
nextTick(() => {
  initEcharts();
});
</script>

<style scoped>
/* 可添加组件样式 */
</style>
